<script setup lang="ts">
import {Delete, BottomRight, Message, Bottom, EditPen, ElementPlus} from '@element-plus/icons-vue'

import {digElMessage} from '../../../common/Message.ts'
import  {deleteFolderApi,shareFileApi} from '../FileApi.ts'
import {ref} from "vue";

const emit=defineEmits<{
  (e:"changeFolder",folderId:string):void,
  (e:"uploadFolder"):void
}>()

const deleteFolder=async ()=>{

  await deleteFolderApi({
      folderParentId:props.folderInfo.parentID,
      currentFolderId:props.folderInfo.folderId
   }).then(res=>{
    
     if(res.code=="00000"){

       digElMessage('删除文件夹成功','success',1000)

       emit("uploadFolder")
     }
   })
}
const props=defineProps<{
  folderInfo: {
    folderId: "",
    folderName: "",
    parentID: "",
    uploadTime: ""

  }
}>();



const  entryFolder=()=>{
   emit("changeFolder",props.folderInfo.folderId)

}


//分享文件


let centerDialogVisible=ref(false)

let lostData=ref(0)

const options = [
  {
    value: '0',
    label: '永不过期',
  },
  {
    value: '1',
    label: '1天以后过期',
  },
  {
    value: '7',
    label: '7天以后过期',
  },
  {
    value: '30',
    label: '30天以后过期',
  },
  {
    value: '50',
    label: '50天以后过期',
  },

]


let password=ref("")
const shareFile=()=>{
  centerDialogVisible.value=true;
}

const shareFileSubmit=async ()=>{


  lostData.value=lostData.value>=0?lostData.value:0

  if(password.value==""){
    digElMessage("请设置密码","warning",1000)
  }

  else{

  let fid=props.folderInfo.folderId;
    let data={
      loseData: lostData.value,
      shareFileType: 1,
      shareId: fid,
      sharePassword: password.value
    }

    await shareFileApi(data).then(res=>{

      if(res.code=='00000'){
        digElMessage("生成链接成功" +
            `${res.data}`,"success",1000)
      }
      centerDialogVisible.value=false;
    })

  }
}
</script>

<template>


  <el-popover placement="right-start" :width="10" trigger="click" hide-after="100">
    <template #reference>
      <div class="folderContainer">
        <div class="folderWrapper">
          <div class="folder">
            <div class="front"></div>
            <div class="center"></div>
            <div class="back"></div>
          </div>
          <div class="folderName">
            <span>{{props.folderInfo.folderName}}</span>
          </div>
<!--          <div class="folderTime">-->
<!--            <span>{{props.folderInfo.uploadTime}}</span>-->
<!--          </div>-->
        </div>
      </div>
    </template>

    <div class="dig_select" >
      <div >
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="danger" :icon="Delete" circle  @click="deleteFolder"/>
        <el-text type="info" @click="deleteFolder">删除</el-text>
      </div>
      <div>
        <el-button type="info" style="font-size: 10px;width: 15px;height: 15px" :icon="Message" circle @click="entryFolder" />
        <el-text type="info"  @click="entryFolder">进入</el-text>
      </div>
      <div>
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="success" :icon="ElementPlus" circle  @click="shareFile" />
        <el-text type="info"  @click="shareFile">分享</el-text>
      </div>



    </div>

  </el-popover>

  <!--  弹出框-->

  <el-dialog v-model="centerDialogVisible" title="分享文件夹" width="500" center>


    <!--    过期时间-->

    <div class="lost_time" style="margin-bottom: 20px">

      <el-button type="info" style="border-right: none" plain="true" bg="true" size="default">过期时间</el-button>

      <el-select
          size="default"
          v-model="lostData"
          placeholder="Select"

          style="width: 240px"
      >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />


      </el-select>
    </div>

    <!--    设置密码-->

    <div class="lost_password">
      <el-input
          v-model="password"

          placeholder=""
          style="width: 330px"
      >
        <template #prepend>设置密码</template>
      </el-input>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="shareFileSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped lang="less">
.folderContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;

}

.folder {
  width: 70px;
  height: 80px;
  perspective: 600px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.folderWrapper{
  padding: 10px 20px 10px 10px;
  position: relative;
  transition: all .2s ease;
  border-radius: 6px;
  cursor: pointer;

}
.folderWrapper:hover{
  background-color: #ffffff;
}

.folder div.back, .folder div.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 60px;
  background-color: #c5b7f1;
}

.folder div.center {
  width: 90px;
  height: 60px;
  background-color: #ffffff;
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 2;
  border-radius: 6px;
}

.folder .front {
  background-image: linear-gradient(to left, #24d5ff 0%, #1eb2ff 45%, #1890ff 100%);
  border-radius: 6px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0,0,0,1);
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px rgba(255, 255, 255, 0.25) inset, 0 -2px 2px rgba(0, 0, 0, 0.1);
  transform: rotateX(-30deg);
  transform-origin: bottom;
  transition: all .2s ease;

}

.folder:hover .front {
  transform: rotateX(-40deg);
}

.folder .back:before {
  content: " ";
  position: absolute;
  left: 0;
  top: -10px;
  width: 40px;
  height: 10px;
  border-radius: 6px 6px 0 0;
  background-color: #1eb2ff;
}

.folder .back {
  background-image: linear-gradient(to top, #24d5ff 0%, #1eb2ff 45%, #1eb2ff 100%);
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.folderName {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(37, 48, 43);
}

.folderTime {
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(37, 48, 43, .36);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.dig_select{
  margin-left: 10px;
  div{
    margin-bottom: 10px;
    .el-button{
      margin-right: 10px;
    }
  }
}
</style>